<template>
  <button @click="$emit('click')"  :disabled="disabled" :class="'button iule-button--'+size" :style="'height:'+height+';font-size:calc('+height+'*0.42);line-height:'+height+';border-radius:calc('+height+'*0.5);font-weight:'+fontWeight">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'IuleButton',
  props: {
    height: {
      default: '0.78rem',
      type: String
    },
    size: {
      default: 'default',
      type: String
    },
    disabled: {
      default: false,
      type: Boolean
    },
    fontWeight: {
      default: '400',
      type: String
    }
  },
  methods: {

  }

}
</script>

<style scoped>
  button {
    border: 0rem;
  }
  .button {
    word-break:keep-all;
    text-align: center;
    background-color: rgba(255, 69, 69, 1);
    color: rgba(255, 255, 255, 1);
  }
  .iule-button--samll {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
  .iule-button--default {
    white-space:nowrap;
    width: -moz-fit-content;
    width: fit-content;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .iule-button--large {
    width: 2rem;
    /*padding-left: 0.6rem;*/
    /*padding-right: 0.6rem;*/
  }
  .iule-button--full {
    width:90%;
    position: relative;
    left: 5%;
    /*font-size: 0.39rem !important;*/
  }
  .button:disabled {
    background-color: rgba(210,210,210,1);
  }
  .button:active {
    background-color: rgb(199, 41, 45);
  }
</style>
